<script setup lang="ts">
import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useVbenForm } from '#/adapter/form';
import {
  getXinHuaImage,
  queryCnnById,
  queryXinHuaById,
} from '#/api/dataManagement/collectionData';
import titlePic from '#/assets/images/title.png';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';

import { modalSchema } from './data';

const emit = defineEmits<{ reload: [] }>();

const isUpdate = ref(false);
const title = computed(() => {
  return '详情';
});

const [BasicForm, formApi] = useVbenForm({
  commonConfig: {
    labelWidth: 80,
  },
  schema: modalSchema(),
  showDefaultActions: false,
});

const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
  {
    initializedGetter: defaultFormValueGetter(formApi),
    currentGetter: defaultFormValueGetter(formApi),
  },
);
const content: any = ref({});
const news: any = ref({});
const imageUrls = ref<string[]>([]); // 显式类型声明为字符串数组
const [BasicModal, modalApi] = useVbenModal({
  fullscreenButton: false,
  showCancelButton: false,
  showConfirmButton: false,
  onBeforeClose,
  onClosed: handleClosed,
  onConfirm: handleConfirm,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);
    const { row } = modalApi.getData() as { row?: any };
    if (row.sourceType) {
      if (row.sourceType === '1') {
        const record: any = await queryXinHuaById({
          id: row.id,
        });
        news.value = record;
        content.value = record.content.replaceAll('\n', '\n\n');

        // 并行请求所有图片
        const imagePromises = record.images.map(async (imageId: any) => {
          const response = await getXinHuaImage(imageId);
          return new Blob([response], { type: response.type || 'image/jpeg' });
        });

        // 等待所有图片加载完成
        const blobs = await Promise.all(imagePromises);
        imageUrls.value = blobs.map((blob) => URL.createObjectURL(blob));
      } else if (row.sourceType === '2') {
        const record = await queryCnnById({
          id: row.id,
        });
        console.log('record', record);
      }
    }
    modalApi.modalLoading(false);
  },
});

async function handleConfirm() {
  try {
    modalApi.lock(true);
    modalApi.close();
  } catch (error) {
    console.error(error);
  } finally {
    modalApi.lock(false);
  }
}

async function handleClosed() {
  await formApi.resetForm();
  resetInitialized();
}
// 内存管理：图片加载后释放Blob URL
function revokeObjectURL(url: any) {
  URL.revokeObjectURL(url);
}
</script>

<template>
  <BasicModal :centered="true" :title="title" class="h-[850px] w-[1360px]">
    <!-- <BasicForm /> -->
    <div class="flex items-end" style="margin: 18px">
      <img :src="titlePic" height="20px" width="12px" alt="" />
      <span style="margin-left: 10px; font-size: 18px">{{ news.title }}</span>
    </div>
    <div style="margin: 10px 0">
      <div class="flex items-center" style="margin: 18px">
        <div class="flex items-center md:w-1/2">
          <span
            style="
              margin-left: 10px;
              font-size: 14px;
              width: 100px;
              text-align: right;
            "
            >时间：</span>
          <span style="color: #637ead; margin-left: 10px; font-size: 14px">{{
            news.time
          }}</span>
        </div>
        <div class="flex items-center">
          <span
            style="
              margin-left: 10px;
              font-size: 14px;
              width: 100px;
              text-align: right;
            "
            >数据来源：</span
          >
          <span style="color: #637ead; margin-left: 10px; font-size: 14px">{{
            news.source
          }}</span>
        </div>
      </div>
      <div class="flex items-center" style="margin: 18px">
        <div class="flex items-center md:w-1/2">
          <span
            style="
              margin-left: 10px;
              font-size: 14px;
              width: 100px;
              text-align: right;
            "
            >所属领域：</span
          >
          <span style="color: #637ead; margin-left: 10px; font-size: 14px">{{
            news.label
          }}</span>
        </div>
        <div class="flex items-center">
          <span
            style="
              margin-left: 10px;
              font-size: 14px;
              width: 100px;
              text-align: right;
            "
            >热点话题：</span
          >
          <span style="color: #637ead; margin-left: 10px; font-size: 14px">{{
            news.keyword
          }}</span>
        </div>
      </div>
    </div>
    <div class="flex items-end" style="margin: 18px">
      <img :src="titlePic" height="20px" width="12px" alt="" />
      <span style="margin-left: 10px; font-size: 18px">内容</span>
    </div>
    <div class="flex flex-col justify-between md:flex-row">
      <div class="text-content">{{ content }}</div>
      <div class="image-grid" style="margin-top: 40px">
        <div
          v-for="(url, index) in imageUrls"
          :key="index"
          style="text-align: center"
        >
          <img
            style="margin: 20px 10px"
            :src="url"
            @load="revokeObjectURL(url)"
          />
          <span>{{ `图-${index + 1}` }}</span>
        </div>
      </div>
    </div>
  </BasicModal>
</template>

<style>
.text-content {
  white-space: pre-line; /* 保留换行符 */
  line-height: 1.6; /* 增大行间距 */

  /* 段落样式 */
  text-align: justify; /* 两端对齐 */
  text-indent: 2em; /* 首行缩进 */
  margin-bottom: 1.5em; /* 段后间距 */

  /* 可选装饰 */
  color: #fff; /* 海洋蓝文本色 */
  padding: 15px;
  border-left: 3px solid #4da8da; /* 左侧装饰线 */
  font-size: 14px;
}
</style>
